<!-- 底部弹窗组件（日期选择） -->
<template>
  <view class="popup-bottom-datepicker-wrapper" @click.stop="hide()" v-if="popupShow">
    <view class="popup-box" @click.stop>
      <view class="popup-body">
        <!-- 自定义插槽 -->
        <slot></slot>

        <view class="popup-title" v-if="!range">
          <view class="title">{{ title }}</view>
          <view class="longtime-btn" v-if="longTimeBtn" @click.stop="longTime()">长期</view>
        </view>

        <view class="range-area" v-if="range">
          <view class="date-box" :class="{ active: startDatePickerShow }" @click.stop="openStartTime()">
            <view v-if="startDate">{{ startDate }}</view>
            <view v-else>开始时间</view>
          </view>
          <view class="date-divider"> 至 </view>
          <view class="date-box" :class="{ active: endDatePickerShow }" @click.stop="openEndTime()">
            <view v-if="endDate">{{ endDate }}</view>
            <view v-else @click="endDateTextHandle">结束时间</view>
          </view>
        </view>

        <view class="select-picker">
          <view class="select-picker-start" v-if="startDatePickerShow">
            <van-datetime-picker :value="startDateValue" type="date" :min-date="minDate" :max-date="maxDate"
              @change="changeTime" :show-toolbar="false" />
          </view>
          <view class="select-picker-end" v-if="endDatePickerShow">
            <van-datetime-picker :value="endDateValue" type="date" :min-date="minDate" :max-date="maxDate"
              @change="changeEndTime" :show-toolbar="false" />
          </view>
        </view>
      </view>

      <view class="operation-btn-wrapper">
        <view class="operation-btn assist-btn" :class="{ single: singleBtn }" @click.stop="hide()" v-if="!singleBtn">
          {{ assistBtnText }}
        </view>
        <view class="divider" v-if="!singleBtn"></view>
        <view class="operation-btn main-btn" @click.stop="operate()">
          {{ mainBtnText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { getFormatTime } from "@/utils/time";
import moment from "moment";
import { showToast, showModal } from "@/utils/toast";

/** props-组件属性 */
const props = defineProps({
  /** 是否为时间段类型 */
  range: {
    type: Boolean,
    default: false,
  },
  /** 标题 **/
  title: {
    type: String,
    default: "选择时间",
  },
  /** 是否有“长期”按钮 */
  longTimeBtn: {
    type: Boolean,
    default: false,
  },
  /** 是否单按钮（仅留主按钮） */
  singleBtn: {
    type: Boolean,
    default: false,
  },
  /** 副按钮默认文本 */
  assistBtn: {
    type: String,
    default: "",
  },
  /** 主按钮默认文本 */
  mainBtn: {
    type: String,
    default: "",
  },
  /** 自定义开始日期 */
  startTime: {
    type: String,
    default: moment().format("YYYY-MM-DD"),
  },
  /** 自定义结束日期 */
  endTime: {
    type: String,
    default: moment().format("YYYY-MM-DD"),
  },
  /** 最小可选日期 */
  minDateParam: {
    type: String,
    default: "1970-01-01",
  },
  /** 最大可选日期 */
  maxDateParam: {
    type: String,
    default: "2100-01-01",
  },
});

/** emit-组件事件 */
const emit = defineEmits(["operate"]);

/** data-数据 */
// 弹窗显示
let popupShow = ref(false);
// 副按钮文本
let assistBtnText = ref("");
// 主按钮文本
let mainBtnText = ref("");
// 起始日期（当组件为非时间段模式时，此字段为选择日期）
let startDate = ref("");
// 结束日期
let endDate = ref("");
// van-datetime-picker组件需要的起始日期格式
let startDateValue = ref(null);
// van-datetime-picker组件需要的结束日期格式
let endDateValue = ref(null);
// 起始日期选择器显示
let startDatePickerShow = ref(true);
// 结束日期选择器显示
let endDatePickerShow = ref(false);
// 最小可选日期
let minDate = ref(null);
// 最大可选日期
let maxDate = ref(null);

assistBtnText.value = "取消";
mainBtnText.value = "确定";
startDate.value = moment().format("YYYY-MM-DD");
startDateValue.value = new Date();
endDateValue.value = new Date();
minDate.value = new Date(props.minDateParam);
maxDate.value = new Date(props.maxDateParam);

/** 监听数据 */
watch(
  () => props.assistBtn,
  (newVal) => {
    if (newVal) assistBtnText.value = newVal;
  },
  { immediate: true }
);

watch(
  () => props.mainBtn,
  (newVal) => {
    if (newVal) mainBtnText.value = newVal;
  },
  { immediate: true }
);

/** 显示弹窗 */
function show() {
  popupShow.value = true;
  if (props.startTime) {
    startDate.value = props.startTime;
    startDateValue.value = new Date(startDate.value);
  }
  if (props.endTime) {
    endDate.value = props.endTime;
    endDateValue.value = new Date(endDate.value);
  }
}

/** 关闭弹窗 */
function hide() {
  popupShow.value = false;
}

/** 选择长期 */
function longTime() {
  const result = 0;
  emit("operate", result);
  hide();
}

/** 主按钮操作 */
function operate() {
  if (!startDate.value) {
    showToast("请选择开始日期", "none");
    return;
  }
  if (props.range && !endDate.value) {
    showToast("请选择结束日期", "none");
    return;
  }
  if (props.range && startDate.value > endDate.value) {
    showModal({ content: "开始日期不可晚于结束日期" });
    return;
  }

  let result = null;
  if (props.range) {
    result = {
      startDate: startDate.value,
      endDate: endDate.value,
    };
  } else {
    result = startDate.value;
  }
  console.log("result==>", result);
  emit("operate", result);
  hide();
}

/** 打开起始日期选择器 */
function openStartTime() {
  startDatePickerShow.value = true;
  endDatePickerShow.value = false;
}

/** 打开结束日期选择器 */
function openEndTime() {
  startDatePickerShow.value = false;
  endDatePickerShow.value = true;
}

// todo:2023-08-01 已知华为nova8change事件有1-2秒延迟
/** 改变起始日期 */
function changeTime(value) {
  // const time = new Date(value.detail).getTime();
  // startDate.value = getFormatTime(time, 'YYYY-MM-DD');
  // startDateValue.value = new Date(time);
  let tempTime =
    value.detail.getValues()[0] +
    "-" +
    value.detail.getValues()[1] +
    "-" +
    value.detail.getValues()[2];
  const time = new Date(tempTime).getTime();

  startDate.value = tempTime;
  startDateValue.value = new Date(time);
}

/** 改变结束日期 */
function changeEndTime(value) {
  // const time = new Date(value.detail).getTime();
  // endDate.value = getFormatTime(time, 'YYYY-MM-DD');
  // endDateValue.value = new Date(time);
  let tempTime =
    value.detail.getValues()[0] +
    "-" +
    value.detail.getValues()[1] +
    "-" +
    value.detail.getValues()[2];
  const time = new Date(tempTime).getTime();

  endDate.value = tempTime;
  endDateValue.value = new Date(time);
}

/** 点击结束时间文本回调 */
function endDateTextHandle() {
  if (props.endTime) {
    endDate.value = props.endTime;
    endDateValue.value = new Date(endDate.value);
  }
}

/** 暴露方法给外部使用 */
defineExpose({
  show,
  hide,
});
</script>

<style lang="scss" scoped>
.popup-bottom-datepicker-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-bgColor);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 99999;

  .popup-box {
    position: relative;
    width: 100%;
    background: #f5f5f5;
    border-radius: 50rpx 50rpx 0rpx 0rpx;
    overflow: hidden;
    animation: fade-in 0.3s ease-in-out;

    .popup-body {
      background-color: #fff;
      margin-bottom: 20rpx;

      .popup-title {
        width: 100%;
        height: 110rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 34rpx;
          color: var(--text-color);
          font-weight: bold;
        }

        .longtime-btn {
          width: 120rpx;
          height: 60rpx;
          background: var(--primary-color);
          color: var(--text-color);
          border-radius: 16rpx;
          font-size: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .range-area {
        display: flex;
        align-items: center;
        padding: 20rpx 40rpx;
        box-sizing: border-box;

        .date-box {
          flex: 1;
          height: 70rpx;
          border-radius: 16rpx;
          font-size: 30rpx;
          color: var(--text-color);
          background-color: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: border-color 0.3s ease-in-out;
        }

        .date-box.active {
          background-color: var(--primary-color);
          color: #fff;
        }

        .date-divider {
          font-size: 30rpx;
          color: var(--text-color);
          margin: 0 20rpx;
        }
      }
    }

    .operation-btn-wrapper {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      background-color: #fff;

      .operation-btn {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
      }

      .assist-btn {
        color: var(--text-color);
      }

      .assist-btn.single,
      .main-btn {
        color: var(--primary-color);
      }

      .divider {
        width: 1rpx;
        height: 70rpx;
        background-color: var(--divider-color);
      }
    }
  }
}

@keyframes fade-in {
  from {
    transform: translateY(50rpx);
    opacity: 0.5;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
